<template>
	<view class="banner">
		<uv-swiper :list="props.list" height="720rpx" indicator keyName="image" :radius="0" @change="swiperChange"
			circular @click="swiperClick">
			<template v-slot:indicator>
				<view slot="indicator" :style="{ width: computedValues.indicatorWidth() + 'px'}" class="indicator">
					<view class="indicator-dot-active"
						:style="{ transform: `translateX(${computedValues.activeDotOffset()}px)` }"></view>
				</view>
			</template>
		</uv-swiper>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		computed
	} from 'vue'
	const props = defineProps({
		list: {
			type: Array,
			default: () => {
				return []
			}
		}
	})
	const current = ref(0);

	const computedValues = computed(() => {
		return {
			// 动态计算 indicator 的宽度
			indicatorWidth: () => {
				return `${props.list.length * 12}`;
			},
			// 计算激活点的偏移量
			activeDotOffset: () => {
				return current.value * 12;
			}
		};
	});


	// 轮播滚动事件
	const swiperChange = (e) => {
		current.value = e.current;
	}

	// 轮播点击事件
	const swiperClick = (e) => {
		console.log(e, 'e');
	}
</script>

<style lang="scss" scoped>
	.indicator {
		display: flex;
		position: relative;
		background-color: rgba(225, 225, 225, 0.23);
		height: 4rpx;
		border-radius: 2rpx;

		.indicator-dot-active {
			position: absolute;
			width: 12px;
			height: 4rpx;
			border-radius: 2rpx;
			background-color: $base-color-white;
			transition: transform 0.3s;
			top: 0;
		}
	}
</style>